<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 300px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="./js/react.development.js "></script>
    <script src="./js/react-dom.development.js "></script>
    <script src="./js/babel.min.js "></script>
    <script type="text/babel">
      const div = (
        <div
          className="box"
          style={{ width: 100, backgroundColor: 'red', fontSize: '3rem' }}
          onClick={function (e) {
            // e.persist()
            // e 不是真正的事件对象,是react中封装合成事件. 解决了事件对象本身存在都兼容性问题.注意:一般工作学习中,还是会称之为事件对象
            // 虽然e是合成事件,但是使用时和事件对象是一样的
            console.log('点击了', e)
            // 注意: 我们在react中定义的事件处理函数,不是真正的事件处理函数.在react内部是通过apply调用的.所以this应该指向window.但是我们代码被babel编译过,开启了严格模式,所以this最中指向了undefined
            console.log(this)
          }}
          // onMouseEnter={function () {
          //   console.log('鼠标移入了')
          // }}
        >
          你好
        </div>
      )
      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>

<!-- 

  react源码: 

  div的真实dom.addEvenetListener('事件名', function(e){

     调用了我们定义的函数
     我们的函数.apply()
  })

 -->
